<template>
  <div class="my_edit">
    <p>基本信息</p>
    <el-form ref="form" v-loading="loading" :model="form" label-width="130px">
      <el-form-item label="文库名称">
        <el-input
          v-model="form.name"
          size="small"
          placeholder="请输入名称，最多可添加30个字"
          style="width: 320px"
        ></el-input>
      </el-form-item>
      <el-form-item label="文库作者">
        <el-input
          v-model="form.author"
          size="small"
          placeholder="请输入作者，最多可添加20个字"
          style="width: 320px"
        ></el-input>
      </el-form-item>

      <!-- <div>{{this.$route.query.id}}</div> -->

      <!-- <el-form-item label="文件上传">
        <div v-if="form.file_ext" :size="100" :src="form.file_ext"></div>
        <el-upload
          :before-upload="beforeUpload"
          :on-change="uploadChange"
          :action="BASEURL + '/public/xlsx'"
          :headers="{
            Authorization: 'Bearer ' + $store.state.user.remember_token
          }"
          name="filename"
          :on-success="uploaded"
          :show-file-list="false"
        >
          <el-button type="primary">+&nbsp;&nbsp;上传</el-button>
        </el-upload>
      </el-form-item> -->
      <el-form-item label="文库简介">
        <el-input
          type="textarea"
          maxlength="500"
          show-word-limit
          :rows="5"
          placeholder="请输入简介，最多可添加500个字"
          :resize="'horizontal'"
          v-model="form.textarea"
        ></el-input>
      </el-form-item>
      <p>上架信息</p>
      <el-form-item label="所属分类">
        <el-select v-model="form.region" placeholder="请选择" size="small">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="浏览基数">
        <template>
          <el-input-number
            v-model="form.browse_base"
            controls-position="right"
            @change="handleChange"
            :min="0"
            :max="10"
            size="small"
          ></el-input-number>
          <span style="color:gray">学员端浏览量显示为：浏览基数+实际浏览数量</span>
        </template>
      </el-form-item>
    </el-form>
    <div class="my_footer">
      <el-button size="medium" @click="goGanLi">返回</el-button>
      <el-button type="primary" size="medium" @click="save">保存并返回</el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { BASEURL } from '../../api'
export default {
  data() {
    return {
      BASEURL,
      loading: false,
      form: {
        name: '',
        author: '',
        // file_ext: "",
        textarea: '',
        browse_base: ''
      },
      id: this.$route.query.id,
      num: 1
    }
  },
  mounted() {},
  created() {
    if (this.id) {
      axios.get('/library/' + this.id).then(res => {
        console.log(res)
        if (res) {
          this.form.name = res.data.name
          this.form.author = res.data.author
          this.form.textarea = res.data.instruction
          this.form.browse_base = res.data.browse_base
        }
      })
    }
  },
  methods: {
    beforeUpload() {
      this.loading = true
    },
    uploadChange() {
      this.loading = false
    },
    uploaded(res) {
      if (res.code === 200) {
        // 把上传之后的路径保存到表单中
        this.form.file_ext = res.data.path
      }
    },
    // 加减器
    handleChange() {},
    // 返回
    goGanLi() {
      this.$router.push({ name: 'ShopLibraryManage' })
    },
    // 保存
    save() {
      if (this.id) {
        axios.put('/library/' + this.id, this.form).then(res => {
          if (res) {
            this.$router.push({ name: 'ShopLibraryManage' })
          }
        })
      } else {
        // 没有ID就是添加
        axios.get('/library', this.form).then(res => {
          if (res) {
            this.$router.push({ name: 'ShopLibraryManage' })
          }
        })
      }
    }
  }
}

</script>

<style lang='scss' scoped>
.my_footer{
  display: flex;
  justify-content: center;
  align-items: center;

}
</style>
